<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国地图</title>
    <!-- <script src="js/d3@7.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> -->
    <!-- <script src="js/d3@7.js"></script> -->
    <script src="https://d3js.org/d3.v5.min.js"></script>


</head>

<body>

    <svg width="900" height="700"></svg>


</body>

<script>

    //获取svg
    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');

    var g = svg.append('g').attr('transform', 'translate(0,0)');

    //创建一个地图投影
    var mercator = d3.geoMercator()
        .center([107, 31])//设置投影的中心点 经纬度
        .scale(550)//设置缩放因子
        .translate([width / 2, height / 2]);//设置平移偏移量

    //创建一个地理路径生成器
    var geoPath = d3.geoPath()
        .projection(mercator)//设置地理路径生成器的投影方式

    // d3.json('https://geojson.cn/api/data/100000.json').then(function (data) {
    // d3.json('https://geo.datav.aliyun.com/areas_v3/bound/441400_full.json').then(function (data) {
    d3.json('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json').then(function (data) {
        // d3.json('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(function (data) {  console.log(data);
        //     //新建一个颜色比例尺
        var scaleColor = d3.scaleOrdinal()
            .domain(d3.range(data.features.length))
            .range(d3.schemeCategory10);


        //绘制区域
        g.append('g')
            .selectAll('path')
            .data(data.features)
            .enter()
            .append('path')
            .attr('stroke', 'gray')
            .attr('stroke-width', 1)
            .attr('d', geoPath)
            .attr('fill', function (d, i) {
                return scaleColor(i);
            })
            .on('mouseover', function (event, d) {
                d3.select(this).attr('fill', 'yellow');
            })
            .on('mouseout', function (event, d) {
                d3.select(this).attr('fill', scaleColor(d.index));
                // d3.select(this).attr('fill', scaleColor(data.features.indexOf(d)));
            });

        // 绘制文字
        g.append('g')
            .selectAll('text')
            .data(data.features)
            .enter()
            .append('text')
            .attr('font-size', 12)
            .attr('text-anchor', 'middle')
            .attr('x', function (d, i) {
                var position = mercator(d.properties.centroid || [0, 0]);
                return position[0];
            })
            .attr('y', function (d, i) {
                var position = mercator(d.properties.centroid || [0, 0]);
                return position[1];
            })
            .attr('dy', function (d, i) {
                //这里为什么这么写呢，因为澳门和香港重合了，挤到一起了。
                if (d.properties.name === '澳门特别行政区') {
                    return 10;
                }
            })
            .text(function (d, i) {
                return d.properties.name;
            });
    })

</script>

</html>